<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#heard {
				margin: 0px auto;
				position: relative;
				width: 800px;
				height: 600px;
				background-image: url(img/beijing.png);
			}
			
			#top {
				width: 800px;
				height: 476px;
				/*border-bottom: 1px solid;*/
			}
			
			#top>div {
				font-size: 50px;
				background-image: url(img/pingguo.png);
				width: 63px;
				height: 71px;
				text-align: center;
				line-height: 70px;
				color: white;
				position: absolute;
			}
			
			#top .posui {
				background-image: url(img/poping.png);
				width: 138px;
				height: 63px;
			}
			
			#right {
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
			
			#button>div {
				font-weight: bold;
				/*border: 1px solid;*/
				width: 180px;
				height: 25px;
				margin: 0px auto;
				color: darkgreen;
			}
			
			.u {
				width: 52px;
				height: 52px;
				border-radius: 45px;
				position: absolute;
				bottom: 25px;
				left: 195px;
				font-weight: bold;
				font-size: 15px;
				color: #006400;
			}
			
			.o {
				width: 37px;
				height: 37px;
				border-radius: 30px;
				position: absolute;
				bottom: 49px;
				left: 120px;
				font-weight: bold;
				/*font-size: 15px;*/
				color: #006400;
			}
			
			.i {
				width: 40px;
				height: 40px;
				border-radius: 45px;
				position: absolute;
				bottom: 10px;
				left: 150px;
				font-weight: bold;
				font-size: 15px;
				color: #006400;
			}
			
			#qw {
				position: absolute;
				top: 80px;
				left: 50px;
			}
			
			#icon1 {
				position: absolute;
				right: 100px;
				bottom: 30px;
				display: none;
			}
			
			#icon2 {
				position: absolute;
				right: 60px;
				bottom: 30px;
				display: none;
			}
			
			#icon3 {
				position: absolute;
				right: 80px;
				bottom: 30px;
				display: none;
			}
			
			#icon4 {
				position: absolute;
				right: 40px;
				bottom: 30px;
				display: none;
			}
			
			#icon5 {
				position: absolute;
				right: 100px;
				bottom: 40px;
				display: none;
			}
			
			#icon6 {
				position: absolute;
				right: 60px;
				bottom: 30px;
				display: none;
			}
			
			#icon7 {
				position: absolute;
				right: 80px;
				bottom: 40px;
				display: none;
			}
			
			#icon8 {
				position: absolute;
				right: 60px;
				bottom: 60px;
				display: none;
			}
			
			#icon9 {
				position: absolute;
				right: 100px;
				bottom: 70px;
				display: none;
			}
			
			#icon10 {
				position: absolute;
				right: 40px;
				bottom: 40px;
				display: none;
			}
			
			.y {
				width: 43px;
				height: 43px;
				font-weight: bold;
				font-size: 16px;
				color: #006400;
				border-radius: 45px;
				position: absolute;
				left: 162px;
				bottom: 75px;
			}
			
			#shezhi {
				position: absolute;
				left: 150px;
				top: 80px;
			}
			
			.la {
				position: absolute;
				top: 84px;
				left: 220px;
			}
			
			.gu {
				position: absolute;
				left: 220px;
				top: 132px;
			}
			
			.shi {
				position: absolute;
				left: 220px;
				top: 182px;
			}
			
			.quq {
				position: absolute;
				top: 262px;
				left: 183px;
				width: 73px;
				height: 30px;
				border-radius: 20px;
				color: #202E41;
				font-weight: bold;
				font-size: 20px;
			}
			
			.qux {
				position: absolute;
				top: 262px;
				left: 275px;
				width: 73px;
				height: 30px;
				border-radius: 20px;
				color: #202E41;
				font-weight: bold;
				font-size: 20px;
			}
			
			.mo {
				position: absolute;
				top: 262px;
				left: 365px;
				width: 73px;
				height: 30px;
				border-radius: 20px;
				color: #202E41;
				font-weight: bold;
				font-size: 20px;
			}
		</style>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			er = setInterval("", 1000);
			sd = setInterval("", w);
			var z = 0;
			var z1 = 0;
			$(function() {
				$("#qw").css("display", "none")
				$(".i").click(function() {
					$("#qw").show();
				})
				$(".qux").click(function() {
					$("#qw").hide();
				})
			});
			$(function() {
				$(".y").click(function() {
					clearInterval(er);
					clearInterval(sd);
					clearInterval(g);
					document.getElementById("sj").innerHTML = "时间：0:0:0";
					document.getElementById("gs").innerHTML = "正确率：0%";
					document.getElementById("jg").innerHTML = "速度：0个/分钟";
					document.getElementById("top").innerHTML = null;
				})
			});
			var w = 1000;
			$(function() {
				$(".quq").click(function() {
					var c = document.getElementById("la").value
						/*switch (c) {
							case  1:
								c = 1000;
								break;
							case 2:
								c = 600;
								break;
							case 3:
								c = 200;
								break;
								return w;
						}*/
					if (c == 1) {
						w = 1000
					} else if (c == 2) {
						w = 500
					} else if (c == 3) {
						w = 200
					}
					kaishi();
					$("#qw").hide();
				})
				$(".mo").click(function() {
					$(".la")[0].value = 1;
					$(".gu")[0].value = 100;
					$(".shi")[0].value = 10;
					console.log(v)
				})
			});
			window.onkeydown = function() {
				var reg = event.keyCode;
				var top = document.getElementById("top");
				for (var i = 0; i < top.children.length; i++) {
					var ds = top.children[i].getAttribute("keyCode");
					if (reg == ds) {
						top.removeChild(top.children[i]);
						z1++;
						zheng();
						break;
					}
				}
				if (z1 > 0 && z1 % 10 == 0) {
					document.getElementById("icon" + e).style.display = "block";
					e++;
				}
				du();
			}

			function zhongzhi() {
				clearInterval(er);
				clearInterval(sd);
				clearInterval(g);
			}

			function kaishi() {
				clearInterval(er);
				clearInterval(sd);
				er = setInterval("ch ()", 1000);
				sd = setInterval("wd()", w);
				shijian();
			}

			function ch() {
				var div = document.createElement("div");
				z++;
				var shu = parseInt(Math.random() * 26) + 65;
				div.innerHTML = "&#" + shu + ";";
				div.setAttribute("keyCode", shu)
				var leftA = parseInt(Math.random() * 700) + 10;
				div.style.left = leftA + "px";
				div.style.top = "0px";
				document.getElementById("top").appendChild(div);
			}
			var v = 0;

			function wd() {
				var top = document.getElementById("top");
				for (var i = 0; i < top.children.length; i++) {
					var f=document.getElementById("shi").value;
					var zhi = parseInt(top.children[i].style.top);
					zhi += 10;
					top.children[i].style.top = zhi + "px";
					if (zhi > 380) {
						top.children[i].innerHTML = null;
						top.children[i].className = "posui";
						v++;
					}
					if (zhi > 400) {
						top.removeChild(top.children[i]);
						zheng();
					}
					if (v == f) {
						zhongzhi();
						alert("失败！")
					}
				}
				return v;
			}
			var s = 0;
			var h = 0;
			var m = 0;

			function shijian() {
				s++;
				if (s == 61) {
					s = 0
					m++;
				}
				if (m == 61) {
					h++;
				}
				var sj = document.getElementById("sj");
				sj.innerHTML = "时间：" + h + ':' + m + ':' + s;
				g = setTimeout("shijian()", 1000)
			}

			function zheng() {
				var l = parseInt((z1 / z) * 100);
				var gs = document.getElementById("gs");
				gs.innerHTML = "正确率：" + l + "%";
			}
			var e = 1;

			function du() {
				var t = parseInt(z1 / (h * 60 + m / 60 + s));
				var q = document.getElementById("jg");
				q.innerHTML = "速度：" + t + "个/分钟";
				if (z1 == 100) {
					zhongzhi();
					alert("闯关成功");
				}
			}
			
		</script>
	</head>

	<body>
		<div id="heard">
			<div id="qw">
				<div id="shezhi">
					<img class="" src="img/设置.png" />
					<select class="la" id="la">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
					<input class="gu" id="gu" type="text" value="100" />
					<select class="shi" id="shi">
						<option>10</option>
						<option>20</option>
						<option>40</option>
					</select>
					<input class="quq" id="quq" type="button" value="确定" />
					<input class="qux" id="qux" type="button" value="取消" />
					<input class="mo" type="button" value="默认" />
				</div>
			</div>
			<div id="top">

			</div>
			<div id="button">
				<input class="u" type="button" value="开始" onclick="kaishi()" />
				<input class="o" type="button" value="终止" onclick="zhongzhi()" />
				<input class="i" type="button" value="设置" />
				<input class="y" type="button" value="结束" />
				<div id="sj">时间：0:0:0</div>
				<div id="gs">正确率：0%</div>
				<div id="jg">速度：0个/分钟</div>
				<img id="icon1" src="img/苹果2.png" />
				<img id="icon2" src="img/苹果2.png" />
				<img id="icon3" src="img/苹果2.png" />
				<img id="icon4" src="img/苹果2.png" />
				<img id="icon5" src="img/苹果2.png" />
				<img id="icon6" src="img/苹果2.png" />
				<img id="icon7" src="img/苹果2.png" />
				<img id="icon8" src="img/苹果2.png" />
				<img id="icon9" src="img/苹果2.png" />
				<img id="icon10" src="img/苹果2.png" />
				<img id="right" src="img/篮子.png" />

			</div>
		</div>
	</body>

</html>